<template>
  <div class="min-h-screen w-full bg-gradient-to-br from-[#0f2027] via-[#2c5364] to-[#232526] flex flex-col overflow-hidden">
    <!-- 顶部栏 -->
    <div class="flex items-center justify-between px-10 py-3 bg-gradient-to-r from-blue-900/80 to-blue-700/60 shadow-2xl z-50">
      <div class="flex items-center space-x-4">
        <span class="text-2xl font-bold text-cyan-200 tracking-widest animate-pulse">某某集团数据中心</span>
      </div>
      <div class="flex flex-col items-end text-white select-none">
        <span class="text-xs tracking-widest">{{ currentDate }}</span>
        <span class="text-lg font-bold tracking-wider">{{ currentClock }}</span>
      </div>
    </div>
    <!-- 内容区 -->
    <div class="flex-1 grid grid-cols-12 grid-rows-6 gap-3 p-3">
      <!-- 左上环形图 -->
      <div class="col-span-3 row-span-3 bg-gradient-to-br from-blue-900/80 to-blue-700/80 rounded-2xl shadow-2xl p-3 flex flex-col animate-fade-in">
        <div class="text-cyan-200 text-sm font-bold mb-2 flex items-center"><i class="fas fa-chart-pie mr-2 animate-pulse"></i>栏目名称</div>
        <v-chart :option="pieOption" autoresize class="h-full w-full" />
      </div>
      <!-- 中上数字区 -->
      <div class="col-span-6 row-span-3 bg-gradient-to-br from-blue-800/80 to-cyan-800/80 rounded-2xl shadow-2xl p-3 flex flex-col items-center justify-center animate-fade-in delay-100">
        <div class="flex flex-col items-center w-full">
          <div class="flex items-end space-x-8 mb-2 w-full justify-center">
            <span class="text-5xl font-extrabold text-orange-400 tracking-widest animate-pulse">30,000,000</span>
            <span class="text-2xl text-blue-200 font-bold">91% <span class="text-base">已完成</span></span>
          </div>
          <div class="flex items-center justify-center space-x-8 w-full">
            <div class="flex flex-col items-center">
              <span class="text-yellow-300 text-2xl font-bold">21,334,300</span>
              <span class="text-xs text-cyan-100">集团目标</span>
            </div>
            <div class="flex flex-col items-center">
              <span class="text-green-400 text-2xl font-bold">1,342,934</span>
              <span class="text-xs text-cyan-100">累计成本</span>
            </div>
            <div class="flex flex-col items-center">
              <span class="text-orange-300 text-2xl font-bold">19,991,366</span>
              <span class="text-xs text-cyan-100">累计利润</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 右上折线图 -->
      <div class="col-span-3 row-span-3 bg-gradient-to-br from-blue-900/80 to-blue-700/80 rounded-2xl shadow-2xl p-3 flex flex-col animate-fade-in delay-200">
        <div class="text-cyan-200 text-sm font-bold mb-2 flex items-center"><i class="fas fa-chart-line mr-2 animate-pulse"></i>指标名称</div>
        <v-chart :option="lineOption" autoresize class="h-full w-full" />
      </div>
      <!-- 左中员工发展 -->
      <div class="col-span-3 row-span-2 bg-gradient-to-br from-blue-900/80 to-blue-700/80 rounded-2xl shadow-2xl p-3 flex flex-col animate-fade-in delay-150">
        <div class="flex items-center mb-2">
          <i class="fas fa-users text-cyan-300 text-lg mr-2 animate-pulse"></i>
          <span class="text-cyan-100 text-sm font-bold">员工发展</span>
        </div>
        <div class="flex items-center justify-between mb-2">
          <div class="flex flex-col items-center">
            <span class="text-blue-200 text-lg font-bold">12,376</span>
            <span class="text-xs text-cyan-100">本年度累计</span>
          </div>
          <div class="flex flex-col items-center">
            <span class="text-yellow-200 text-lg font-bold">32,251</span>
            <span class="text-xs text-cyan-100">本年度计划</span>
          </div>
        </div>
        <v-chart :option="barOption" autoresize class="h-24 w-full" />
      </div>
      <!-- 中下仪表盘 -->
      <div class="col-span-6 row-span-2 flex space-x-3">
        <div class="flex-1 bg-gradient-to-br from-blue-900/80 to-blue-700/80 rounded-2xl shadow-2xl p-3 flex flex-col items-center animate-fade-in delay-200">
          <v-chart :option="gaugeOption1" autoresize class="h-32 w-full" />
          <div class="text-xs text-cyan-100 mt-1">指标名称</div>
        </div>
        <div class="flex-1 bg-gradient-to-br from-blue-900/80 to-blue-700/80 rounded-2xl shadow-2xl p-3 flex flex-col items-center animate-fade-in delay-250">
          <v-chart :option="gaugeOption2" autoresize class="h-32 w-full" />
          <div class="text-xs text-cyan-100 mt-1">指标名称</div>
        </div>
        <div class="flex-1 bg-gradient-to-br from-blue-900/80 to-blue-700/80 rounded-2xl shadow-2xl p-3 flex flex-col items-center animate-fade-in delay-300">
          <v-chart :option="gaugeOption3" autoresize class="h-32 w-full" />
          <div class="text-xs text-cyan-100 mt-1">指标名称</div>
        </div>
      </div>
      <!-- 右中柱状图 -->
      <div class="col-span-3 row-span-2 bg-gradient-to-br from-blue-900/80 to-blue-700/80 rounded-2xl shadow-2xl p-3 flex flex-col animate-fade-in delay-300">
        <div class="text-cyan-200 text-sm font-bold mb-2 flex items-center"><i class="fas fa-chart-bar mr-2 animate-pulse"></i>指标名称</div>
        <v-chart :option="barOption2" autoresize class="h-full w-full" />
      </div>
      <!-- 下方表格 -->
      <div class="col-span-7 row-span-1 bg-gradient-to-br from-blue-900/80 to-blue-700/80 rounded-2xl shadow-2xl p-3 animate-fade-in delay-350 overflow-auto">
        <div class="text-cyan-200 text-sm font-bold mb-2 flex items-center"><i class="fas fa-table mr-2 animate-pulse"></i>指标名称指标指标</div>
        <table class="w-full text-xs text-cyan-100">
          <thead>
            <tr class="border-b border-cyan-400/20">
              <th class="p-1">指标名称</th>
              <th class="p-1">时间</th>
              <th class="p-1">负责人</th>
              <th class="p-1">编号</th>
              <th class="p-1">状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in tableData" :key="row.id" class="hover:bg-blue-800/40 transition-all">
              <td class="p-1">{{ row.name }}</td>
              <td class="p-1">{{ row.time }}</td>
              <td class="p-1">{{ row.owner }}</td>
              <td class="p-1">{{ row.code }}</td>
              <td class="p-1">
                <span :class="['px-2 py-0.5 rounded-full text-xs font-bold', row.status === '已完成' ? 'bg-green-500/80 text-white' : 'bg-yellow-400/80 text-black']">{{ row.status }}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 右下雷达图 -->
      <div class="col-span-5 row-span-1 bg-gradient-to-br from-blue-900/80 to-blue-700/80 rounded-2xl shadow-2xl p-3 flex flex-col animate-fade-in delay-400">
        <div class="text-cyan-200 text-sm font-bold mb-2 flex items-center"><i class="fas fa-bullseye mr-2 animate-pulse"></i>指标名</div>
        <v-chart :option="radarOption" autoresize class="h-24 w-full" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { use } from 'echarts/core'
import VChart from 'vue-echarts'
import { defineComponent } from 'vue'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, LineChart, BarChart, GaugeChart, RadarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent } from 'echarts/components'
use([
  CanvasRenderer,
  PieChart, LineChart, BarChart, GaugeChart, RadarChart,
  TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent
])
defineComponent({
  components: { VChart }
})

const currentDate = ref('')
const currentClock = ref('')
function updateTime() {
  const now = new Date()
  const y = now.getFullYear()
  const m = String(now.getMonth() + 1).padStart(2, '0')
  const d = String(now.getDate()).padStart(2, '0')
  const h = String(now.getHours()).padStart(2, '0')
  const min = String(now.getMinutes()).padStart(2, '0')
  const s = String(now.getSeconds()).padStart(2, '0')
  currentDate.value = `${y}-${m}-${d}`
  currentClock.value = `${h}:${min}:${s}`
}
let timer = null
onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
})
onUnmounted(() => {
  if (timer) clearInterval(timer)
})

// 图表示例数据
const pieOption = {
  tooltip: { trigger: 'item' },
  legend: { top: 'bottom', textStyle: { color: '#fff' } },
  series: [{
    name: '指标',
    type: 'pie',
    radius: ['40%', '70%'],
    avoidLabelOverlap: false,
    itemStyle: { borderRadius: 10, borderColor: '#222', borderWidth: 2 },
    label: { show: false },
    emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
    data: [
      { value: 1048, name: '指标A' },
      { value: 735, name: '指标B' },
      { value: 580, name: '指标C' },
      { value: 484, name: '指标D' }
    ]
  }]
}
const lineOption = {
  tooltip: { trigger: 'axis' },
  legend: { data: ['指标1', '指标2', '指标3'], textStyle: { color: '#fff' } },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'category', boundaryGap: false, data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], axisLabel: { color: '#fff' } },
  yAxis: { type: 'value', axisLabel: { color: '#fff' } },
  series: [
    { name: '指标1', type: 'line', data: [120, 132, 101, 134, 90, 230, 210, 180, 160, 140, 120, 100] },
    { name: '指标2', type: 'line', data: [220, 182, 191, 234, 290, 330, 310, 300, 280, 260, 240, 220] },
    { name: '指标3', type: 'line', data: [150, 232, 201, 154, 190, 330, 410, 400, 380, 360, 340, 320] }
  ]
}
const barOption = {
  tooltip: {},
  xAxis: { data: ['1月','4月','7月','10月'], axisLabel: { color: '#fff' } },
  yAxis: { axisLabel: { color: '#fff' } },
  series: [{ type: 'bar', data: [500, 1200, 900, 700], itemStyle: { color: '#4fd1c5' } }]
}
const barOption2 = {
  tooltip: {},
  xAxis: { data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], axisLabel: { color: '#fff' } },
  yAxis: { axisLabel: { color: '#fff' } },
  series: [{ type: 'bar', data: [1200, 900, 1100, 800, 950, 1200, 1300, 1250, 1100, 1000, 900, 850], itemStyle: { color: '#63b3ed' } }]
}
const gaugeOption1 = {
  series: [{
    type: 'gauge',
    min: 0, max: 200, splitNumber: 8,
    axisLine: { lineStyle: { width: 10, color: [[0.5, '#4fd1c5'], [1, '#222']] } },
    pointer: { width: 4 },
    detail: { valueAnimation: true, fontSize: 24, color: '#4fd1c5' },
    data: [{ value: 40, name: '' }]
  }]
}
const gaugeOption2 = {
  series: [{
    type: 'gauge',
    min: 0, max: 200, splitNumber: 8,
    axisLine: { lineStyle: { width: 10, color: [[0.5, '#f6e05e'], [1, '#222']] } },
    pointer: { width: 4 },
    detail: { valueAnimation: true, fontSize: 24, color: '#f6e05e' },
    data: [{ value: 15, name: '' }]
  }]
}
const gaugeOption3 = {
  series: [{
    type: 'gauge',
    min: 0, max: 200, splitNumber: 8,
    axisLine: { lineStyle: { width: 10, color: [[0.5, '#f687b3'], [1, '#222']] } },
    pointer: { width: 4 },
    detail: { valueAnimation: true, fontSize: 24, color: '#f687b3' },
    data: [{ value: 190, name: '' }]
  }]
}
const radarOption = {
  tooltip: {},
  legend: { data: ['指标A', '指标B'], textStyle: { color: '#fff' } },
  radar: { indicator: [
    { name: '1月', max: 100 }, { name: '2月', max: 100 }, { name: '3月', max: 100 },
    { name: '4月', max: 100 }, { name: '5月', max: 100 }, { name: '6月', max: 100 },
    { name: '7月', max: 100 }, { name: '8月', max: 100 }, { name: '9月', max: 100 },
    { name: '10月', max: 100 }, { name: '11月', max: 100 }, { name: '12月', max: 100 }
  ], axisName: { color: '#fff' } },
  series: [{
    name: '指标名',
    type: 'radar',
    data: [
      { value: [60, 73, 85, 40, 60, 80, 90, 70, 60, 80, 90, 70], name: '指标A' },
      { value: [50, 60, 70, 80, 90, 60, 50, 60, 70, 80, 90, 60], name: '指标B' }
    ]
  }]
}
const tableData = [
  { id: 1, name: '08010431', time: '8/1 09:30', owner: '张三', code: 'HGSDFEFJD50', status: '已完成' },
  { id: 2, name: '08010432', time: '8/1 09:30', owner: '李四', code: 'HGSDFEFJD51', status: '已完成' },
  { id: 3, name: '08010433', time: '8/1 09:30', owner: '王五', code: 'HGSDFEFJD52', status: '已完成' },
  { id: 4, name: '08010434', time: '8/1 09:30', owner: '赵六', code: 'HGSDFEFJD53', status: '已完成' }
]
</script>

<style scoped>
@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.animate-fade-in {
  animation: fade-in 0.7s cubic-bezier(0.4,0,0.2,1);
}
</style>
